import { Table, type TableColumnType,type TableProps } from "antd";
type DataType = {
  key: string;
  name: string;
  age: number;
  address: string;
};
export default function AntdTS() {

const dataSource:DataType[] = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

// 约束antd 组件的 props 类型 类型名称 组件名+属性名+Type
// 或者是 组件名+Props[props名字]
// const columns:TableColumnType<DataType>[] = [
const columns:TableProps['columns'] = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    sortOrder: 'descend',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];
  return (
    <div >
        <Table dataSource={dataSource} columns={columns} />;
    </div>
  );
}